<!-- 协商历史 -->
<template>
  <div>
    <a-table :dataSource="tatleData" :columns="columns" bordered :pagination="false" size="small">
      <template #bodyCell="{ column, text }">
        <template v-if="column.dataIndex === 'complaintMediaList'">
          <div class="smart-table-operate">
            <!-- <a-button @click="showForm(record)" type="link">申请修改</a-button> -->
            <a-image style="width: 50px; height: 50px" :src="getUrl(item)" v-for="(item, index) in text?.mediaUrl" :key="index" />
          </div>
        </template>
      </template>
    </a-table>
  </div>
</template>
<script setup>
  import { nextTick, reactive, ref, computed, watch } from 'vue'
  import { SmartLoading } from '/src/components/framework/smart-loading'
  import { getHistoryList, wechatDownload } from '/@/api/business/b-merchant/complaintManage'
  import { getHistoryList as getHistoryListOperation, wechatDownload as wechatDownloadOperation } from '/@/api/business/b-operation/complaintManage'
  import dayjs from 'dayjs'
  import _ from 'lodash'
  import {
    OPERATE_TYPE, // 操作类型
  } from '/@/constants/dict'
  import { selectDictLabel } from '/@/utils/common'

  import { useUserStore } from '/@/store/modules/system/user'
  const USER_TYPE = useUserStore().userType // 用户类型: 1-平台;2-代理;4-商户

  const apiSource = {
    listApi: (data) => {
      if (USER_TYPE == '4') return getHistoryList(data)
      if (USER_TYPE == '4') return getHistoryListOperation(data)
    },
    download: (data) => {
      if (USER_TYPE == '4') return wechatDownload(data)
      if (USER_TYPE == '4') return wechatDownloadOperation(data)
    },
  }

  const props = defineProps({
    rowData: {
      type: Object,
      default: () => {},
    },
    formSource: {
      type: String,
      default: 'alimini', // alimini | ali
    },
  })
  // ------------------------ 事件 ------------------------

  // ------------------------ 显示与隐藏 ------------------------

  const imgUrl = ref({})
  // 获取附件信息
  const getUrl = (url) => {
    let data = {
      mediaId: url,
    }
    if (imgUrl.value[url]) {
      return imgUrl.value[url]
    }
    apiSource.download(data).then((res) => {
      imgUrl.value[url] = `data:image/png;base64,${res.data.base64}`
    })
    return imgUrl.value[url]
  }
  // 获取结算列表
  const tatleData = ref([])
  async function getSettlementList(data) {
    SmartLoading.show()
    try {
      let res = await apiSource.listApi(data)
      if (res.code === 200) {
        tatleData.value = res.data
      }
    } catch (error) {
      console.log(error)
    }
    SmartLoading.hide()
  }
  async function show(rowData) {
    let params = { complaintNo: rowData.complaintNo }
    await getSettlementList(params)
    // nextTick(() => {
    //   formRef.value?.clearValidate()
    // })
  }

  // ------------------------ 表单 ------------------------

  /* 列表数据 */

  const columns = ref([
    // {
    //   title: '序号',
    //   dataIndex: 'index',
    //   width: 70,
    //   align: 'center',
    //   customRender: ({ index }) => {
    //     return index + 1 //(queryForm.pageNo - 1) * queryForm.pageSize + index + 1
    //   },
    // },
    {
      title: '操作时间',
      dataIndex: 'operateTime',
      customRender: (column) => dayjs(column.text).format('YYYY-MM-DD HH:mm:ss'),
      ellipsis: true,
    },
    {
      title: '操作人',
      dataIndex: 'operator',
      ellipsis: true,
    },
    {
      title: '操作类型',
      dataIndex: 'operateType',
      customRender: ({ text }) => {
        return selectDictLabel(OPERATE_TYPE, text)
      },
      ellipsis: true,
    },
    {
      title: '内容',
      dataIndex: 'operateDetails',
      ellipsis: false,
    },
    {
      title: '图片',
      dataIndex: 'complaintMediaList',
      // customRender: ({ text }) => {
      //   return selectDictLabel(OPERATE_TYPE, text)
      // },
      ellipsis: false,
    },
  ])

  /* 列表数据 */

  defineExpose({
    show,
  })
  watch(
    () => props.rowData,
    (val) => {
      if (props.rowData) {
        show(val)
      }
    },
    { immediate: true },
  )
</script>
